<template>
    <div class="releasebox">
        <div class="release">
            <input v-model="this.data.title" class="input" type="text" placeholder="标题必填">
            <div class="release_aieditor" ref="divRef">
                <div class="aie-container">
                    <div class="aie-container-header"></div>

                    <div class="aie-container-main"></div>
                    <div class="aie-container-footer"></div>
                </div>
            </div>

        </div>
        <div class="publish">
            <div class="publish_box">
                <div class="pb_class">
                    <div class="name">分类选择</div>
                    <el-radio-group v-model="data.radio">
                        <el-radio-button label="0">动漫</el-radio-button>
                        <el-radio-button label="1">游戏</el-radio-button>
                    </el-radio-group>

                </div>
                <div class="pb_fabu">
                    <el-button type="primary" @click="preview()">全屏预览</el-button>
                    <el-button type="primary" @click="publish(0)">暂存</el-button>
                    <el-button type="primary" @click="publish(1)">发布</el-button>
                    <el-button type="primary" @click="publish(2)">放弃</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { PostArticles } from '../api/article.js';
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css"
import '@/assets/css/index.css'
export default {
    data() {
        return {
            
            data:
            {
                publisher_id:this.$store.state.user.id,//用户id
                title: null,//标题
                
                radio: '0',// 分类id
                comment:null,//内容
                image_url:null,//图片地址
            },
            html: null
        }
    },
    methods: {
        preview(){
            this.$message("开发中")
        },
        publish(status) {
            // 暂存
            if (status === 0) {

            }
            // 发布
            if (status === 1) {
                PostArticles(
                    {
                    publisher_id: this.$store.state.user.id,//用户id
                    title: this.data.title,//标题
                        classId: this.data.radio,// 分类id
                        content: this.data.comment,//内容
                    image_url: this.data.image_url,//图片地址
                }).then(res => {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                }).catch((error) => {
                    if (error.code === "ERR_BAD_RESPONSE") {
                        this.$message.error('发布失败');
                    }
                });
            }
            // 放弃，删除草稿
            if (status === 2) {
                
            }
        }
    },
    mounted() {
        new AiEditor({
            element: this.$refs.divRef,
            placeholder: "点击输入内容...", 
            content: '',
            toolbarKeys: ["undo", "redo",
                "|", "heading", "font-family", "font-size",
                "|", "bold", "italic", "underline", "strike", "link", "hr", "emoji",
                "|", "highlight", "font-color",
                "|", "align", "line-height",
                "|", "bullet-list", "ordered-list", "indent-decrease", "indent-increase", "break",
                "|", "image", "video", "quote",
                "|",
            ],
            fontFamily: {
                values: [
                    { name: "宋体", value: "SimSun" },
                    { name: "仿宋", value: "FangSong" },
                    { name: "黑体", value: "SimHei" },
                    { name: "楷体", value: "KaiTi" },
                    { name: "微软雅黑", value: "Microsoft YaHei" },
                    { name: "方正仿宋简体_GBK", value: "FangSong_GB2312" },
                    { name: "Arial", value: "Arial" },
                ]
            },
            fontSize: {
                values: [
                    { name: "大", value: 24 },
                    { name: "点大", value: 21.3 },
                    { name: "一点大", value: 20 },
                    { name: "一点点大", value: 18.7 },
                    { name: "一点点点大", value: 16 },
                    { name: "标准", value: 14 },
                    { name: "小一点", value: 12 },
                ]
            },
            // @谁
            onMentionQuery: (query) => {
                return [
                    'Lea Thompson',
                    'Cyndi Lauper',
                    'Tom Cruise',
                    'Madonna',
                    'Jerry Hall',
                    'Joan Collins',
                    'Winona Ryder',
                    'Christina Applegate',
                    'Alyssa Milano',
                    'Molly Ringwald',
                    'Ally Sheedy',
                    'Debbie Harry',
                    'Olivia Newton-John',
                    'Elton John',
                    'Michael J. Fox',
                    'Axl Rose',
                    'Emilio Estevez',
                    'Ralph Macchio',
                    'Rob Lowe',
                    'Jennifer Grey',
                    'Mickey Rourke',
                    'John Cusack',
                    'Matthew Broderick',
                    'Justine Bateman',
                    'Lisa Bonet',
                ]
                    .filter(item => item.toLowerCase().startsWith(query.toLowerCase()))
                    .slice(0, 5)
            },
            link: {
                autolink: true,
                rel: "",
                class: "",
                bubbleMenuItems: ["Edit", "UnLink", "visit"],
            },
            onChange: (aiEditor) => {
                // 监听到用编辑器内容发生变化了，控制台打印编辑器的 html 内容...
                this.html = aiEditor.getHtml();
                this.data.comment =this.html
                console.log(this.html);
                console.log(this.data);
                
                
            }
        })
        
        
    }
}
</script>

.
<style lang="less" scoped>
.input {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: 0 solid #d7d7d7;
    height: 50px;
    margin-bottom: 10px;
    // margin: 0 0 20px 0;
    padding: 10px;
    font-size: 18px;
    border-radius: 8px;
    outline-style: none;
    background-color: #ffffff;
}
.releasebox{

height: 100vh;

}

.release {
    background-color: #e6e6e6;
    padding: 20px;
    margin-top: 70px;
    width: 1000px;
    border-radius: 8px;
    .aie-container{
        border-radius: 8px;
        border: 0 solid #000;
    }
    .release_aieditor {
        width: 1000px ;
        .aie-container .aie-header>div{
            border: 0 solid #000;
        }
        .aie-container-header {
            display: flex;
            // justify-content: center;
            padding-left: 10px;
            align-items: center;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .aie-container-main {
            overflow: scroll;
            margin-top: 20px;
            height: 400px;
                align-items: center;
                border-radius: 8px;
                // overflow: hidden;

        }
.aie-container-main::-webkit-scrollbar {
    width: 20px;
    /* width of the scrollbar */
    height: 0;
    /* height of the horizontal scrollbar (if needed) */
}

.aie-container-main::-webkit-scrollbar-thumb {
    background-color: #ff6d13;
    /* color of the scrollbar thumb */
    border-radius: 10px;
    /* rounded corners of the thumb */
}

.aie-container-main::-webkit-scrollbar-track {
    background-color: #ffffff;
    /* color of the scrollbar track */
    border-radius: 10px;
    /* rounded corners of the track */
}

.aie-container-main::-webkit-scrollbar-corner {
    background-color: transparent;
    /* color of the scrollbar corner */
}
        .aie-container-footer {
            display: none;
        }

        
    }
}
.publish{
    background-color: #e6e6e6;
    margin-bottom: 100px;
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    .publish_box{
        border-radius: 8px;
        background-color: #fff;
        justify-content: space-between;
        // width: 1000px;
        display: flex;
        padding: 10px;
        // height: 50px;
        .pb_class{
            width: 600px;
            display: flex;
            align-items: center;
            .name{
                display: flex;
                width: 160px;
            }
        }
        .pb_fabu{
                        display: flex;
                        align-items: center;
        }
    }
}
</style>